import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { GoodsItem } from '../components/GoodsItem';
import { Buyer } from '../components/Buyer';
import { h } from 'vue';
import { Input, Select, Tag } from 'ant-design-vue';
import { PayTypeEnum, PayTypeColorEnum } from '/@/common/enum/order';
import { RefundStatusEnum, RefundTypeEnum } from '/@/common/enum/order/refund';
const InputGroup = Input.Group;

// table表格 数据
export const columns: BasicColumn[] = [
  {
    title: '订单ID',
    dataIndex: 'order_no',
    width: 100,
  },
  {
    title: '商品信息',
    dataIndex: 'goods',
    slots: { title: 'customGoods', customRender: 'goods' },
    width: 100,
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return (
        <>
          {record.goods.map((goods) => {
            return <GoodsItem goods={goods}></GoodsItem>;
          })}
        </>
      );
      // return record.goods.map((goods) =>
      //   h(GoodsItem, {
      //     goods,
      //   }),
      // );
    },
  },
  {
    title: '实付款',
    dataIndex: 'total_price',
    width: 100,
    align: 'left',
    slots: { title: 'customPrice', customRender: 'price' },
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h(
        'div',
        {
          style: {
            whiteSpace: 'pre-line',
          },
        },
        `￥${record.total_price}\n(含运费：￥${record.express_price})`,
      );
    },
  },
  {
    title: '买家',
    dataIndex: 'user',
    width: 100,
    align: 'left',
    slots: { title: 'customUser', customRender: 'user' },
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return <Buyer buyer={record.user} />;
      // return h(Buyer, {
      //   buyer: record.user,
      // });
    },
  },
  {
    title: '售后类型',
    dataIndex: 'type',
    width: 100,
    slots: { title: 'customType', customRender: 'Type' },
    customRender: ({ record }) => {
      const tagColor = PayTypeColorEnum[record.pay_type].name;
      const tagText = PayTypeEnum[record.pay_type].name;
      return <Tag color={tagColor}>{tagText}</Tag>;
      // return h(
      //   Tag,
      //   {
      //     color: PayTypeColorEnum[record.pay_type].name,
      //   },
      //   () => PayTypeEnum[record.pay_type].name,
      // );
    },
  },
  {
    title: '处理进度',
    dataIndex: 'progress',
    width: 150,
    align: 'left',
    slots: { title: 'customProgress', customRender: 'progress' },
  },
  {
    title: '售后单状态',
    dataIndex: 'status',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    width: 100,
  },
];

// 表格搜索类型
const allType = { value: -1, label: '全部' };
// 通过枚举获取选择框的值
const getTypeByEnum = (data) =>
  data.data.map((v) => {
    return {
      label: v.name,
      ...v,
    };
  });

export const SearchType = [
  { label: '订单号', value: 10 },
  { label: '会员昵称', value: 20 },
  { label: '会员ID', value: 30 },
];

// 表格搜索框
export const searchFormSchema: FormSchema[] = [
  {
    field: 'searchType',
    label: '搜索类型',
    component: 'Input',
    labelWidth: 80,
    colProps: { span: 0 },
    defaultValue: 10,
    ifShow: false,
    slot: 'search',
  },
  {
    field: 'searchType',
    label: '关键字',
    component: 'Input',
    labelWidth: 50,
    colProps: { span: 7 },
    render: ({ model, field }) => {
      const inputStyle={display:'flex',flexDirection:'row'}
      const selectStyle={width:'150px'}
      const inputKey='searchValue'
      return (<InputGroup compact style={inputStyle}>
        <Select style={selectStyle} value={model[field]} options={SearchType} onChange={e=>model[field] = e}>
          {model[field]}
        </Select>
        <Input value={model[inputKey]} placeholder="请输入关键字" onChange={e=>model[inputKey] = e.target.value} />
      </InputGroup>)

      // return h(
      //   InputGroup,
      //   {
      //     compact: true,
      //     value: '',
      //     style: 'display:flex;flex-direction: row;',
      //   },
      //   () => [
      //     // select组件
      //     h(Select, {
      //       style: 'width:150px;',
      //       value: model['searchType'],
      //       options: SearchType,
      //       onChange: (e: ChangeEvent) => {
      //         model['searchType'] = e;
      //       },
      //     }),
      //     // input组件
      //     h(Input, {
      //       value: model[field],
      //       placeholder: '请输入关键字',
      //       onChange: (e: ChangeEvent) => {
      //         model[field] = e.target.value;
      //       },
      //     }),
      //   ],
      // );
    },
  },
  {
    field: 'refundType',
    label: '售后类型',
    component: 'Select',
    defaultValue: -1,
    componentProps: () => {
      return { options: [allType, ...getTypeByEnum(RefundTypeEnum)] };
    },
    labelWidth: 80,
    colProps: { span: 5 },
  },
  {
    field: 'refundStatus',
    label: '售后状态',
    component: 'Select',
    defaultValue: -1,
    componentProps: {
      options: [allType, ...getTypeByEnum(RefundStatusEnum)],
    },
    labelWidth: 80,
    colProps: { span: 5 },
  },
  {
    field: 'betweenTime',
    label: '下单时间',
    component: 'RangePicker',
    componentProps: {
      dateFormatList: ['DD-MM-YYYY', 'DD-MM-YY'],
      valueFormat: 'DD-MM-YYYY',
    },
    labelWidth: 80,
    colProps: { span: 7 },
  },
];
